<template>
<div>
  foo{{foo}}
  bar{{bar}}
</div>
</template>

<script>
import {toRefs, reactive, onMounted} from 'vue'
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })
  console.log('torefs ex state')
  console.log(state)
  /**
   * Proxy {foo: 1, bar: 2}
   [[Handler]]: Object
   [[Target]]: Object
   bar: 2
   foo: 1
   [[Prototype]]: Object
   [[IsRevoked]]: false
   */
  // 操作 state 的逻辑

  // 返回时转换为ref
  return toRefs(state)
}
export default {
  name: "torefsEx",
  setup(){
    const {foo, bar} = useFeatureX();
    onMounted(()=>{
      console.log('torefsEx')
      console.log('foo', foo, bar)
      /**
       * ObjectRefImpl {_object: Proxy, _key: "foo", __v_isRef: true}
       __v_isRef: true
       _key: "foo"
       _object: Proxy {foo: 1, bar: 2}
       value: 1
       [[Prototype]]: Object
       */
      console.log('torefsEx')
    })
    return {
      foo,
      bar,
    }
  }
}
</script>

<style scoped>

</style>